<template>
  <div class="bindCardBox">
    <div class="back" @click="close">
      <img src="@/assets/bigScreen/window-close.png">
    </div>
    <div class="bindCardContent">
      <div class="cardContent">
        <div class="title">{{ model.title }}</div>
        <div class="content" v-html="richTextContent" />
      </div>
    </div>
  </div>
</template>

<script>
import { policyGuidanceDetail } from '@/api/bigScreen'

export default {
  components: {
  },
  porp: {
    policyNo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      model: {}
    }
  },
  computed: {
    // 富文本样式过滤
    richTextContent() {
      return this.replaceAll(this.model.content, '<img', `<img style=\"max-width: 100%;\"`)
    }
  },
  created() {
  },
  mounted() {},
  methods: {
    replaceAll(str, find, replace) {
      return str?.replace(new RegExp(find, 'g'), replace)
    },
    getDetails(no) {
      policyGuidanceDetail(no).then(res => {
        console.log('详情结果', res)
        if (res.status === 0) {
          this.model = res.data
        }
      })
    },
    close() {
      this.$emit('close', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.bindCardBox {
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  width: 100%;
  height: 100%;
  background: rgba(3, 7, 19, .9);
  z-index: 99999;
  .back {
    position: absolute;
    right: 100px;
    top: 80px;
    cursor: pointer;
    z-index: 9999;
    img{
      width: 84px;
      height: 84px;
    }
  }
  .bindCardContent {
    width: 1879px;
    height: 1056px;
    background: url('~@/assets/bigScreen/popupWindow.png') no-repeat 50%;
    background-size: 1879px 1056px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    overflow: hidden;
    .cardContent{
      display: flex;
      position: absolute;
      left: 300px;
      top: 150px;
      width: 1350px;
      height: 770px;
      .title{
        position: absolute;
        top: 0;
        left: 0;
        width: 1350px;
        text-align: center;
        font-size: 30px;
        font-family: HarmonyOS Sans SC;
        font-weight: 500;
      }
      .content{
        padding-right: 20px;
        margin-top: 50px;
        color: #fff !important;
        font-size: 18px;
        max-height: 770px;
        overflow-y: auto;
      }
    }
  }
}
/*滚动条样式*/
/*滚动轨道样式*/
::-webkit-scrollbar-track {
	background: #006d75;
	border-radius: 2px;
}
/*滚动条*/
::-webkit-scrollbar-thumb {
	background: #3ec9d3;
	border-radius: 10px;
}
::-webkit-scrollbar {
    width:6px;
}
</style>
